Sync from a8e1c0a7402940e0fc5beef669522b315052df1blatest

1 files changed, 96 insertions, 0 deletions

diff --git a/examples/hackernews/src/pages/stories/[id].astro b/examples/hackernews/src/pages/stories/[id].astro
new file mode 100644
index 000000000..84383aa9e
--- /dev/null
+++ b/examples/hackernews/src/pages/stories/[id].astro
@@ -0,0 +1,96 @@
+---
+import Comment from '../../components/Comment.astro';
+import For from '../../components/For.astro';
+import Show from '../../components/Show.astro';
+import Layout from '../../layouts/Layout.astro';
+import fetchAPI from '../../lib/api';
+import type { IComment, IStory } from '../../types.js';
+
+const { id } = Astro.params as { id: string };
+
+const story = (await fetchAPI(`item/${id}`)) as IStory;
+---
+
+<Layout>
+	<div>
+		<header>
+			<a href={story.url} target="_blank">
+				<h1>{story.title}</h1>
+			</a>
+			<Show when={story.domain}>
+				<span class="host">({story.domain})</span>
+			</Show>
+			<p class="meta">
+				{story.points} points | by
+				<a href={`/users/${story.user}`}>
+					{story.user}
+				</a>
+				&nbsp;{story.time_ago}
+			</p>
+		</header>
+		<main>
+			<p>
+				{story.comments_count ? story.comments_count + ' comments' : 'No comments yet.'}
+			</p>
+			<ul class="comment-children">
+				<For each={story.comments}>
+					{(comment: IComment) => <Comment comment={comment} />}
+				</For>
+			</ul>
+		</main>
+	</div>
+</Layout>
+
+<style>
+	header {
+		background-color: rgb(248 250 252);
+		padding: 1.8em 2em 1em;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+	}
+
+	h1 {
+		display: inline;
+		font-size: 1.5em;
+		margin: 0;
+		margin-right: 0.5em;
+	}
+
+	.host,
+	.meta,
+	.host a {
+		color: rgb(51 65 85);
+	}
+
+	.meta a {
+		text-decoration: underline;
+	}
+
+	main {
+		background-color: rgb(248 250 252);
+		margin-top: 10px;
+		padding: 0 2em 0.5em;
+	}
+
+	main p {
+		margin: 0;
+		font-size: 1.1em;
+		padding: 1em 0;
+		position: relative;
+	}
+
+	main :global(ul) {
+		list-style-type: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	@media (max-width: 600px) {
+		h1 {
+			font-size: 1.25em;
+		}
+	}
+
+	ul :global(ul) {
+		margin-left: 1.5em;
+	}
+</style>